<template>
  <div class="container-fluid">
    <div class="container p-0 flex-item-between">
      <div class="left">
        <div class="fs-5 fw-bold text-primary">最新资讯</div>
        <div class="fs-3 fw-bold">了解雅马哈更多信息</div>

        <div class="info-list mt-4">
          <div v-for="(item, index) in Date" :key="item.id" @mouseenter="hover_event(item, index)">
            <div class="top mt-3">
              <button type="button" class="btn btn-primary rounded-0 ps-0 pe-0">{{ item.type_name }}</button>
              <span class="m-4">{{ item.release_time
                }}</span>
            </div>
            <div class="article fs-5 flex-item-between pt-2 pb-2 ">
              <div class="title">{{ item.title }}</div>
              <div class="icon me-3"><i class="bi bi-arrow-right"></i></div>
            </div>
          </div>

        </div>

      </div>
      <div class="right ">
        <button type="button" class="btn btn-outline-dark rounded-0 mt-4 ms-4"
          style="width: 120px;">了解更多&nbsp;></button>
        <div class="flex-item-center mx-auto">
          <img ref="img_opacity" class="img-fluid" :src="showImg" alt="">
        </div>
      </div>
    </div>
  </div>


</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const Props = defineProps(['contentDate'])

/* 本页面接收props显示数据 */
const Date: any = ref([])
Date.value = Props.contentDate

const showImg = ref()
onMounted(() => {
  get_date()
})
const get_date = (img_index: number = 0) => {
  preload_img()
  showImg.value = preloadImgs.value[img_index]
}

/* 用的是先请求一遍，图片缓存下来 */
const preloadImgs = ref<string[]>([])
const preload_img = () => {
  Date.value.forEach((item: any) => {
    const img = new Image()
    img.src = '/api' + item.img_url
    preloadImgs.value.push(img.src)
    // return img
  });
}


const img_opacity = ref()
const hover_event = (item: any, index: number) => {
  img_opacity.value.style.opacity = .5
  setTimeout(() => {
    showImg.value = preloadImgs.value[index]
    img_opacity.value.style.opacity = 1
  }, 300)
}
/* Tips:关于图片：可以用户hover函数触发请求前，吧图片缓存下来。或是别的一些方法。 */

</script>


<style scoped lang="scss">
.container-fluid {
  margin-top: 95px;
  padding: 106px 0;
  background-color: #dfeffc;

  .container {
    height: 500px;

    .left {
      flex: 1;
      // background-color: aquamarine;
      height: 100%;
      overflow: hidden;

      .info-list {
        // background: #640000;
        height: 400px;
        overflow-y: scroll;

        >div {
          border-bottom: 1px solid gray;

          .title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          &:hover {

            .title,
            .icon {
              color: rgb(44, 213, 213);
            }

            & .title+.icon {
              display: block;
            }
          }
        }

        button {
          width: 80px;
          line-height: 1;
        }

        .icon {
          display: none;
        }


      }
    }

    .right {
      flex: 1;
      height: 100%;
      // background-color: aqua;

      >div {
        height: 400px;
        width: 95%;
        margin-top: 38px;

        img {
          transition: opacity .5s linear;
        }
      }
    }
  }

}
</style>